import React, { PureComponent, Fragment } from 'react';
import { Row, Col, Form, Button, Input, Select, DatePicker, message, InputNumber } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
const { MonthPicker } = DatePicker;

import styles from './YqybAddForm.less';

import moment from 'moment';
import { connect } from 'dva';
@connect()
class YqybAddForm extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {};
    this.dispatch = this.props.dispatch;
  }

  componentDidMount() {
    // var p = this.props;
    // var r = p.record;
    // this.props.form.setFields({
    //   clbm: {
    //     value: r.clbm,
    //   },
    //   wtlx: {
    //     value: r.wtlx,
    //   },
    //   scsj: {
    //     value: r.scsj ? moment(Date(r.scsj.slice(6, -2))) : null,
    //   },
    //   sbsj: {
    //     value: r.sbsj ? moment(Date(r.sbsj.slice(6, -2))) : null,
    //   },
    // });
  }

  /* 获取下拉框初始数据 */

  // 点击button
  handleSubmit = e => {
    let _self = this;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        var r = {};
        r.id = '';
        r.qlmc = values.qlmc;
        r.dlmc = values.dlmc;
        r.nf = values.nyf.format('YYYY');
        r.yf = values.nyf.format('M');

        r.sbsj = '';
        r.sbryzh = '';
        r.sbry = '';
        r.sbbm = '';
        r.sbbmmc = '';

        r.ssql = values.ssql == undefined ? 0 : values.ssql;
        r.ssgh = values.ssgh == undefined ? 0 : values.ssgh;
        r.gdt = values.gdt == undefined ? 0 : values.gdt;
        r.thl = values.thl == undefined ? 0 : values.thl;
        r.shl = values.shl == undefined ? 0 : values.shl;
        r.tzhl = values.tzhl == undefined ? 0 : values.tzhl;
        r.fzl = values.fzl == undefined ? 0 : values.fzl;
        r.zz = values.zz == undefined ? 0 : values.zz;
        r.gqlj = values.gqlj == undefined ? 0 : values.gqlj;
        r.lblj = values.lblj == undefined ? 0 : values.lblj;
        r.qdlj = values.qdlj == undefined ? 0 : values.qdlj;
        r.lblfckzj = values.lblfckzj == undefined ? 0 : values.lblfckzj;
        r.lblffb = values.lblffb == undefined ? 0 : values.lblffb;
        r.tz = values.tz == undefined ? 0 : values.tz;
        r.xsk = values.xsk == undefined ? 0 : values.xsk;
        r.bz = values.bz == undefined ? 0 : values.bz;
        r.sfth = ''; //1正常，2打回来
        _self.dispatch({
          type: 'maintain/fetchYqybAdd',
          payload: {
            rm: r,
          },
          callback: response => {
            if (response.status) {
              message.success('新增成功');
              this.props.handleCancel(this.props.modalName);
              debugger
              this.props.GetQueryModelData(this.props.queryCon);
            } else {
              message.error('新增失败');
              console.log(response.ErrorMessage);
            }
          },
        });
      }
    });
  };

  handleReset = () => {
    this.props.form.resetFields();
    this.props.GetQueryProblem(this.props.queryCon);
  };

  render() {
    var s = this.state;
    var p = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 12 },
    };
    const formItemLayout1 = {
      labelCol: { span: 3 },
      wrapperCol: { span: 20 },
    };
    const formItemLayout2 = {
      labelCol: { span: 12 },
      wrapperCol: { span: 12 },
    };
    
    return (
      <Form className={styles.YqybAddForm} onSubmit={this.handleSubmit}>
        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="桥梁名称">
              {getFieldDecorator('qlmc', {
                rules: [{ required: true, message: '请输入道路名称' }],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="道路名称">
              {getFieldDecorator('dlmc', {
                rules: [{ required: true, message: '请输入道路名称' }],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="年月">
              {getFieldDecorator('nyf', {
                rules: [{ required: true, message: '请选择年月' }],
              })(<MonthPicker />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="伸缩清理">
              {getFieldDecorator('ssql', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="伸缩更换">
              {getFieldDecorator('ssgh', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="过渡砼">
              {getFieldDecorator('gdt', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m2" />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="砼护栏">
              {getFieldDecorator('thl', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="石护栏">
              {getFieldDecorator('shl', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m" />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="铁制护栏">
              {getFieldDecorator('tzhl', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="防撞栏">
              {getFieldDecorator('fzl', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m" />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="支座">
              {getFieldDecorator('zz', {
                rules: [
                  {
                    pattern: /^\d+(?=\.{0,1}\d+$|$)/,
                    message: '数值应为正整数',
                  },
                ],
              })(<Input min={1} addonAfter="只" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="盖桥露筋">
              {getFieldDecorator('gqlj', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m2" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="梁板露筋">
              {getFieldDecorator('lblj', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m2" />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="桥墩露筋">
              {getFieldDecorator('qdlj', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m2" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout2} label="梁板裂缝超宽注浆">
              {getFieldDecorator('lblfckzj', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="梁板裂缝封闭">
              {getFieldDecorator('lblffb', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m" />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="涂装">
              {getFieldDecorator('tz', {
                rules: [
                  {
                    pattern: /^\d+(\.\d{1,2})?$/,
                    message: '数值最多为两位小数',
                  },
                ],
              })(<Input addonAfter="m2" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="泄水空">
              {getFieldDecorator('xsk', {
                rules: [
                  {
                    pattern: /^\d+(?=\.{0,1}\d+$|$)/,
                    message: '数值应为正整数',
                  },
                ],
              })(<Input min={1} addonAfter="个" />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout1} label="备 注">
              {getFieldDecorator('bz', {
                rules: [
                  {
                    pattern: /^.{0,2000}$/gi,
                    message: '字数不超过两千字',
                  },
                ],
              })(<TextArea rows={4} />)}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <FormItem style={{ textAlign: 'center' }}>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </FormItem>
        </Row>
      </Form>
    );
  }
}

const YqybAddFm = Form.create()(YqybAddForm);
export default YqybAddFm;
